<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rushiera -- About Me</title>
  <link rel="shortcut icon" type="image/png" id="links"href="#" >
</head>
 <body style="margin: 0px; background-color: rgb(255, 255, 255); "onload="cre()" > <!-- onload="cre()" -->
  
  
<div class="technology-body">
  <canvas id="canvas" width="1365" height="979"></canvas>
  <div class="technology-frame">
    <section>
      <div></div>
      <div></div>
      <div></div>
    </section>
    <section>
      <div></div>
      <div></div>
      <div></div>
    </section>
    <section>
      <div></div>
      <div></div>
      <div></div>
    </section>
    <section>
      <div></div>
      <div></div>
      <div></div>
    </section>
  </div>
</div>

<div class="crion" align="center" >
  <div class="creation" id="create">
    <p id="textwata"></p>
    <ul class="progres">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      
    </ul>
  </div>

</div>  


<link rel="stylesheet" href="/assets/css/technology.css"
>
<script src="/assets/js/jquery-2.0.3.min.js"></script>
<script src="/assets/js/technology.js"></script>

<style>    /* 直接输入, 使用并集选择器可以集体声明 合并代码 */
 li{
   list-style: none;
 }
.crion{    
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    width: 400px;
    height: 200px;
  transform: translate(-50%, -50%);
    font-size: 22px;
    text-align: center;
    line-height: 400%;
    /* margin-top: 50%; */
}
.creation{
  border:1.2px solid skyblue;
  -webkit-mask:linear-gradient(to bottom  right, skyblue, blue);
  Color:rgba(16, 16, 34, 0.9);
  border-radius: 3px;    /*   圆角  */
}
.progres{
  linear-gradient:(to bottom  right, skyblue, blue);
  position: absolute;
  bottom: 20%;
  left: 31%;

}
.progres li{
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0);
  float: left;
  border-radius: 50%;
  left: 50%;
  bottom: 20%;
  margin: 3px;
}

.progred{
  background-color: skyblue!important;
}

</style>


<script>
  function cre(){
    console.log("welcome to here.");
    console.log("this my secret space.")
    console.log("Quick to the sunlogin, for access to my computer. ")
    console.log("http://sunlogin.oray.com/share?shareid=529613920");
    var lk = document.getElementById("links")
    lk.href="https://imglink.win/image/2020/06/16/ytGp1.png"
    var cr = document.getElementById("create");
    var textwata=document.getElementById("textwata")
    var progress=document.getElementById("progress")
    var treacl = 0;
    var treacw = 1300;
    var treack = 0;
    var text2 = "Do    or     do not.        There is no try.";
    var text1 = "";
    cr.style.display="black"
    cr.style.position="absolute"
    cr.style.height="1px"
    cr.style.width="1px"
    textwata.style.position="absolute"
    textwata.style.margin="40px"
    textwata.style.lineHeight="1em"
    textwata.style.top="8%"
    textwata.style.left="0%"

    cr.style.backgroundColor="rgba(160, 160, 160, 0.8)"

    

  setInterval(function(){ treacl=treacl+1;
  if (treacl < 200)
  { 
    cr.style.height=treacl+'px';}          /* 当高达到200时，停止 */
  else if (treacl <600)  
  { 
    cr.style.border="0px"; cr.style.width= (treacl-200) +'px';}     /* 当宽达到400（600-200）时，停止 */
  else { (treacl>= 828 )

  }
  

  textwata.innerText=text1;
  if (treacl%12==0 && treacl>=288 && treacl<828 ){         /* 每12个单位输出一个字符  45*12=540  + 288 */ 
    text1 = text1+text2.charAt(treack) 
    treack++} else if(treacl>828){ }

{return;}
}, 1);

  }
</script>


</body>



</html>

